<template>
  <div id="app1">
    <el-input placeholder="请输入id" v-model="form.id" clearable> </el-input>
    <el-input placeholder="请输入楼层" v-model="form.floor" clearable>
    </el-input>
    <el-input placeholder="请输入房间号" v-model="form.roomNumber" clearable>
    </el-input>
    <el-input placeholder="请输入姓名" v-model="form.name" clearable>
    </el-input>
    <el-input placeholder="请输入性别" v-model="form.gender" clearable>
    </el-input>
    <el-input placeholder="请输入身份证" v-model="form.idNumber" clearable>
    </el-input>
    <el-input placeholder="请输入电话" v-model="form.phone" clearable>
    </el-input>
    <el-input placeholder="请输入微信号" v-model="form.wechatId" clearable>
    </el-input>
    <el-input placeholder="请输入租金" v-model="form.rent" clearable>
    </el-input>
    <el-input placeholder="请输入有宽带" v-model="form.hasBroadband" clearable>
    </el-input>
    <el-input placeholder="请输入搬走日期" v-model="form.moveInDate" clearable>
    </el-input>
    <el-input
      placeholder="请输入付款日期"
      v-model="form.lastPaymentDate"
      clearable
    >
    </el-input>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="floor" label="楼层"> </el-table-column>
      <el-table-column
        prop="roomNumber"
        label="房间号"
        v-model="form.roomNumber"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" v-model="form.name">
      </el-table-column>
      <el-table-column prop="gender" label="性别" v-model="form.gender">
      </el-table-column>
      <el-table-column prop="idNumber" label="身份证" v-model="form.idNumber">
      </el-table-column>
      <el-table-column prop="phone" label="电话" v-model="form.phone">
      </el-table-column>
      <el-table-column prop="wechatId" label="微信号" v-model="form.wechatId">
      </el-table-column>
      <el-table-column prop="rent" label="租金" v-model="form.rent">
      </el-table-column>
      <el-table-column
        prop="hasBroadband"
        label="有宽带"
        v-model="form.hasBroadband"
      >
      </el-table-column>
      <el-table-column
        prop="moveInDate"
        label="搬走日期"
        v-model="form.moveInDate"
      >
      </el-table-column>
      <el-table-column
        prop="lastPaymentDate"
        label="付款日期"
        v-model="form.lastPaymentDate"
      >
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="queryButton()">查询按钮</el-button>
    <el-button type="primary" @click="addButton()">新增按钮</el-button>
    <el-button type="primary" @click="deleteButton()">删除按钮</el-button>
    <el-button type="primary" @click="updateButton()">修改按钮</el-button>
  </div>
</template>

<script>
import { addJob, getJob, delJob, updateJob } from '@/api/user'
export default {
  data () {
    return {
      tableData: [],
      form: {
        id: '',
        floor: '',
        roomNumber: '',
        name: '',
        gender: '',
        idNumber: '',
        phone: '',
        wechatId: '',
        rent: '',
        hasBroadband: '',
        moveInDate: '',
        lastPaymentDate: ''
      }
    }
  },
  created () {
    this.queryButton()
  },
  methods: {
    queryButton () {
      getJob(this.form).then(response => {
        console.log(response)
        console.log(response.data)
        this.tableData = response.data.data
      })
    },
    addButton () {
      addJob(this.form).then(response => {
        console.log(response)
        console.log(response.data)

        this.tablData = response.data.data
      })
    },
    deleteButton () {
      delJob(this.form).then(response => {
        console.log(response)
        console.log(response.data)
        this.tableData = response.data.data
      })
    },
    updateButton () {
      updateJob(this.form).then(response => {
        console.log(response)
        console.log(response.data)
        this.tableData = response.data.data
      })
    }
  }
}
</script>
